<template>
    <view :style="{ '--color': color, '--back-color': $common.hexToRgba(color, 0.1), '--back-colors': $common.hexToRgba(color, 0.8) }">
        <status-bar :title="title" :backColor="backColor" :hideBg="hideBg" :statusHeight="statusHeight"></status-bar>
        <image :src="$imgUrls(top_config.img)" mode="widthFix" class="rows"></image>

        <view class="Box">
            <view class="SearchBox">
                <view class="iconfont icon-btn_search color_99 size42 p-left20 p-right20"></view>
                <input type="text" confirm-type="search" @confirm="Search" @input="Input" class="queryText" v-model="queryText" placeholder="输入达人昵称/商品标题" />
                <view class="searchBtn" @click="Search">搜索</view>
            </view>
        </view>

        <u-sticky :customNavHeight="totalHeight">
            <view class="navBox" v-if="!Show">
                <scroll-view scroll-x="true" class="u-tabs nowrap">
                    <view class="list" @click="click(item, index)" :class="{ Active: id == item.id, fixlist: hidefix }" v-for="(item, index) in list" :key="index">{{ item.name }}</view>
                </scroll-view>
                <view class="swith" @click="Show = true">
                    <view class="iconfont icon-xiangxia color_99 size30"></view>
                </view>
            </view>
        </u-sticky>
        <u-sticky :customNavHeight="totalHeight">
            <view class="navBoxPlus" v-if="Show">
                <view class="row j-sb a-center p-left20">
                    <text class="color_99 size30">全部分类</text>
                    <view class="iconfont icon-xiangshang color_99 size28" @click.stop="Show = false"></view>
                </view>
                <view class="plusBOX">
                    <view class="list" @click="click(item, index)" :class="{ Active: id == item.id }" v-for="(item, index) in list" :key="index">{{ item.name }}</view>
                </view>
            </view>
        </u-sticky>

        <view class="content">
            <view class="row j-centert" v-if="!pageData.length">
                <emptys></emptys>
            </view>

            <block v-if="Show">
                <view class="hideContent"></view>
                <view class="hideContents"></view>
            </block>
            <view class="row j-sb wrap">
                <view class="list" v-for="(item, index) in pageData" :key="item.id">
                    <channel-live class="channelVideo" :feed-id="item.export_id" :promoterShareLink="item.promoter_share_link" object-fit="cover"></channel-live>
                    <view class="product_name ellipsis">{{ item.description }}</view>
                    <view class="priceBox d-flex a-center">
                        <image :src="$imgUrls(item.talent_info.talent_head_img)" mode="aspectFill" class="talent_head_img"></image>
                        <text class="talent_nickname ellipsis">{{ item.talent_info.talent_nickname }}</text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    export default {
        data() {
            return {
                hidefix: false,
                title: ' ',
                top_config: '',
                queryText: '',
                list: [],
                current: 0,
                page: 1,
                limit: 10,
                id: 0,
                getMore: false,
                pageData: [],
                backColor: true,
                // backColor: 'transparent',
                statusHeight: true,
                hideBg: 1,
                Show: false
            };
        },
        onLoad() {
            this.getTalentList();
        },
        methods: {
            getTalentList() {
                this.$http
                    .post({
                        url: '/weChatStoreApi/getLiveList'
                    })
                    .then((res) => {
                        if (res.errcode != '100') return this.$Toast(res.msg);
                        const result = res.data || [];
                        this.list = result;
                        this.top_config = res.top_config;
                        if (result.length) this.id = result[0].id;
                        this.init();
                    });
            },
            init() {
                this.page = 1;
                this.getMore = false;
                const imgH = Math.floor(this.top_config.img_h / 2);
                this.$pop.pageScrollTo(imgH);
                this.page = 1;
                this.getTalentFeedList();
            },
            getTalentFeedList() {
                this.$http
                    .post({
                        url: '/weChatStoreApi/getTalentLiveList',
                        data: {
                            id: this.id,
                            page: this.page,
                            limit: this.limit,
                            queryText: this.queryText
                        }
                    })
                    .then((res) => {
                        if (res.errcode != 100) return this.$Toast(res);
                        const result = res.data || [];
                        this.page == 1 ? (this.pageData = result) : (this.pageData = [...this.pageData, ...result]);
                        result.length < this.limit ? (this.getMore = true) : (this.getMore = false);
                    });
            },
            click(item, index) {
                this.current = index;
                this.id = item.id;
                this.Show = false;
                this.init();
            },

            Search() {
                if (!this.queryText) return;
                this.init();
            },

            Input(e) {
                const value = e.detail.value;
                if (value == '') this.init();
            }
        },
        onPageScroll(e) {
            let scrollTop = Math.floor(e.scrollTop);
            if (scrollTop >= 100) {
                this.hidefix = true;
            } else {
                this.hidefix = false;
            }
            if (scrollTop >= 200) {
                this.title = this.top_config.title;
                this.hideBg = 0;
                this.backColor = false;
            } else {
                this.title = ' ';
                this.hideBg = 1;
                this.backColor = true;
                // this.backColor = 'transparent';
            }
        },
        onReachBottom() {
            if (!this.getMore) return;
            this.page++;
            this.getTalentFeedList();
        },
        computed: {
            ...mapState(['color', 'totalHeight', 'System', 'navHeight', 'navWidth']),
            windowHeigth() {
                let H = this.System.windowHeight;
                return `height: ${H}px`;
            },
            navBarHeight() {
                let H = this.totalHeight + 10;
                return `height: ${H}px`;
            },
            navStyle() {
                return `width: ${this.navWidth}px; height: ${this.navHeight}px;margin-top:${this.System.statusBarHeight}px`;
            },
            activeStyle() {
                return {
                    color: '#000',
                    fontSize: '32rpx',
                    fontWeight: 500
                };
            },
            inactiveStyle() {
                return {
                    color: '#999',
                    fontSize: '30rpx'
                };
            },
            itemStyle() {
                return {
                    height: '40px'
                };
            },
            scrollStyle() {
                let H = this.System.windowHeight - this.totalHeight - 10 - 80;
                return `height: ${H}px`;
            }
        }
    };
</script>
<style>
    page {
        background-color: #f5f5f5;
    }
</style>
<style lang="scss" scoped>
    .Box {
        width: 100%;
        height: 60px;
        background-color: #f5f5f5;
        margin-top: -20rpx;
        position: relative;
        z-index: 10;
        border-radius: 24rpx 24rpx 0 0;
        border: 1px solid #f5f5f5;
        .SearchBox {
            width: 710rpx;
            height: 88rpx;
            background-color: #fff;
            border-radius: 44rpx;
            display: flex;
            align-items: center;
            margin: 24rpx auto 0;
            .queryText {
                flex: 1;
                height: 100%;
                font-size: 30rpx;
                color: #000;
            }
            .searchBtn {
                width: 120rpx;
                height: 75%;
                background-color: var(--color);
                font-size: 32rpx;
                color: #fff;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 10rpx;
                margin-right: 20rpx;
            }
        }
    }
    .navBoxPlus {
        width: 100%;
        background-color: #f5f5f5;
        display: flex;
        flex-direction: column;
        border-radius: 0 0 20rpx 20rpx;
        .icon-xiangshang {
            padding: 20rpx;
        }
        .plusBOX {
            width: 100%;
            padding: 20rpx;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            row-gap: 20rpx;
            column-gap: 20rpx;
            .list {
                background-color: #fff;
                padding: 10rpx 20rpx;
                border-radius: 30rpx;
                color: #333;
                font-size: 26rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                border: 1px solid #fff;
            }
            .Active {
                background-color: var(--back-color);
                border: 1px solid var(--color);
                color: var(--color);
            }
        }
    }
    .navBox {
        width: 100%;
        height: 100rpx;
        padding: 0 20rpx;
        display: flex;
        align-items: center;
        background-color: #f5f5f5;
        .u-tabs {
            flex: 1;
            .list {
                height: 60rpx;
                padding: 0 24rpx;
                background-color: #fff;
                border-radius: 30rpx;
                display: inline-block;
                line-height: 60rpx;
                font-size: 26rpx;
                margin-right: 20rpx;
                color: #333;
                border: 1px solid #fff;
                transition: all 0.5s ease-in-out;
            }
            .list.Active {
                background-color: var(--back-color);
                border: 1px solid var(--color);
                color: var(--color);
            }
            .fixlist {
                padding: 0 !important;
                background-color: #f5f5f5;
                border: 1px solid #f5f5f5 !important;
            }
            .fixlist.Active {
                border: 1px solid #f5f5f5 !important;
                background-color: #f5f5f5 !important;
            }
        }
        .swith {
            width: 60rpx;
            height: 60rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
            background-color: #fff;
        }
    }
    .hideContent {
        background-color: rgba(0, 0, 0, 0.5);
        position: absolute;
        width: 100%;
        height: 100%;
        top: -20rpx;
        left: 0;
        bottom: 0;
        z-index: 100;
    }
    .hideContents {
        background-color: rgba(0, 0, 0, 0.5);
        position: absolute;
        width: 100%;
        height: 20rpx;

        left: 0;
        bottom: 0;
        z-index: 100;
    }
    .content {
        width: 100%;
        min-height: 1000rpx;
        padding: 0 20rpx;

        position: relative;
        .list {
            width: 346rpx;
            background-color: #fff;
            display: flex;
            flex-direction: column;
            border-radius: 10rpx;
            overflow: hidden;
            padding-bottom: 20rpx;
            margin-bottom: 20rpx;
            .channelVideo {
                width: 100%;
                height: 480rpx;
                border-radius: 10rpx 10rpx 0 0;
            }
            .product_name {
                padding: 0 10rpx;
                color: #000;
                font-size: 28rpx;
                font-weight: 500;
                margin: 10rpx 0;
            }
            .priceBox {
                width: 100%;
                padding: 4rpx 10rpx 0 10rpx;
                .talent_head_img {
                    width: 46rpx;
                    height: 46rpx;
                    border-radius: 50%;
                }
                .talent_nickname {
                    flex: 1;
                    font-size: 24rpx;
                    color: #000;
                    margin-left: 10rpx;
                    white-space: normal !important;
                }
                // font-family: cursive;
            }
        }
    }
</style>
